<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div style="display: flex; flex-wrap: wrap">
        <div id="userChart" style="height: 400px; width: 100%"></div>
        <div id="orderPaymentChart" style="height: 400px; width: 50%"></div>
        <div id="orderSendChart" style="height: 400px; width: 50%"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import _ from "lodash";
export default {
  data() {
    return {
      userChartOptions: {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
      },
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 100,
      },
      orderList: [],
      total: 0,
      orderPaymentChartOptions: {
        title: {
          text: "订单付款情况",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "订单付款状态",
            type: "pie",
            radius: "50%",
            color: ["#5470c6", "#ee6666"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      orderPayment: [
        { value: 0, name: "已付款" },
        { value: 0, name: "未付款" },
      ],
      orderSendChartOptions: {
        title: {
          text: "订单发货情况",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "订单发货状态",
            type: "pie",
            radius: "50%",
            color: ["#91cc75", "#ee6666"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      orderSend: [
        { value: 0, name: "已发货" },
        { value: 0, name: "未发货" },
      ],
    };
  },
  created() {},
  async mounted() {
    // const echarts = require('echarts')
    // 基于准备好的dom，初始化echarts实例
    const userChart = echarts.init(document.getElementById("userChart"));

    // 指定图表的配置项和数据
    const { data: res } = await this.$http.get("reports/type/1");
    if (res.meta.status !== 200) {
      return this.$message.error("获取折线图数据失败！");
    }

    const result = _.merge(res.data, this.userChartOptions);
    // 使用刚指定的配置项和数据显示图表。
    userChart.setOption(result);

    await this.getOrderList();
    this.parseOrderOption();
  },
  methods: {
    // 获取订单信息
    async getOrderList() {
      const { data: res } = await this.$http.get("orders", {
        params: this.queryInfo,
      });
      if (res.meta.status !== 200) {
        return this.$message.error("获取订单列表失败！");
      }
      this.orderList = res.data.goods;
      this.total = res.data.total;
    },
    //
    parseOrderOption() {
      const orderPaymentChart = echarts.init(
        document.getElementById("orderPaymentChart")
      );
      const orderSendChart = echarts.init(
        document.getElementById("orderSendChart")
      );
      this.orderList.reduce((item, ret) => {
        item.is_send === "是"
          ? this.orderSend[0].value++
          : this.orderSend[1].value++;
        item.pay_status === "1"
          ? this.orderPayment[0].value++
          : this.orderPayment[1].value++;
        return ret;
      }, []);
      this.orderPaymentChartOptions.series[0].data = this.orderPayment;
      this.orderSendChartOptions.series[0].data = this.orderSend;
      orderPaymentChart.setOption(this.orderPaymentChartOptions);
      orderSendChart.setOption(this.orderSendChartOptions);
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  width: 800px;
  height: 400px;
}
</style>
